import {Component} from 'react';
import React from 'react';
import {connect} from 'umi';
import {PlusOutlined} from '@ant-design/icons';
import {Button, Form, Input, message, Modal, Select, Space} from 'antd';
import APIS from '@/apis';
import HighPerformTable from '@/components/HighPerformTable';
import VideoUpload from '@/components/VideoUpload';
import DocumentUpload from '@/components/DocumentUpload';

class CourseAssetManager extends Component<any, any> {
  actionRef?: any
  state = {
    createVisible: false,
    tableRender: true,
    courseType: [],
    assetType: 0,
    assetUrl: '',
  }

  requestGetData(
    params: {
      pageSize?: number;
      current?: number;
    },
    sorter: {
      [key: string]: 'ascend' | 'descend';
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) {
    return APIS.CourseAPI.GetAssetsList({...params, sorter, filter});
  }

  clomns: any = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '描述',
      dataIndex: 'description',
    },
    {
      title: '更新时间',
      dataIndex: 'updatedTime',
      hideInForm: true,
    },
  ];

  componentDidMount() {
    APIS.CourseAPI.GetTypeList({current: 1, pageSize: 99999}).then(res => this.setState({courseType: res.data}))
  }

  render() {
    return (
      <div>
        {
          this.state.tableRender &&
          <HighPerformTable<any>
            columns={this.clomns}
            requestGetData={this.requestGetData.bind(this)}
            ref={(ref) => (this.actionRef = ref)}
            handleChangeState={(data, state) => {
              return APIS.CourseAPI.ChangeAssetsState({id: data.id, state: state === true ? 1 : 0})
            }}
            handleDelete={id => {
              return APIS.CourseAPI.DeleteAssets({id: id})
            }}
            toolBarRender={() => [
              <Button key='0' type="primary" onClick={() => this.setState({createVisible: true})}>
                <PlusOutlined/> 新增课件
              </Button>,
            ]}
            handleAdd={data => {
              return APIS.CourseAPI.CreateNewAssets({asset: data.tag, description: data.description})
            }}
          />
        }
        <Modal
          title='新增课件'
          visible={this.state.createVisible}
          destroyOnClose={true}
          onCancel={() => this.setState({createVisible: false, assetType: 0, assetUrl: ''})}
          footer={(<div></div>)}
        >
          {
            this.state.createVisible &&
            <Form
              onFinish={values => {
                APIS.CourseAPI.CreateNewAssets({
                  name: values.name,
                  description: values.description,
                  courseType: values.courseType,
                  type: values.type,
                  asset: this.state.assetUrl,
                }).then((response) => {
                  if (response.code === 10000) {
                    message.success("添加成功")
                  } else {
                    message.error("添加失败")
                  }
                  this.setState({createVisible: false, tableRender: false})
                  this.setState({tableRender: true})
                })
              }}
            >
              <Form.Item
                label='课件名称'
                name='name'
                rules={[{required: true, message: '请输入课件名称'}]}
              >
                <Input/>
              </Form.Item>
              <Form.Item
                label='课件简介'
                name='description'
                rules={[{required: true, message: '请输入课件简介'}]}
              >
                <Input/>
              </Form.Item>
              <Form.Item
                label='课程类型'
                name='courseType'
                rules={[{required: true, message: '请选择课程类型'}]}
              >
                <Select>
                  {this.state.courseType?.map((v: any, i) => (
                    <Select.Option key={i} value={v.id}>{v.typeName}</Select.Option>
                  ))}
                </Select>
              </Form.Item>
              <Form.Item
                label='课件类型'
                name='type'
                rules={[{required: true, message: '请选择课件类型'}]}
              >
                <Select onChange={assetType => this.setState({assetType})}>
                  <Select.Option value={1} key='0'>文档</Select.Option>
                  <Select.Option value={2} key='1'>视频</Select.Option>
                </Select>
              </Form.Item>
              {
                this.state.assetType !== 0 &&
                (
                  this.state.assetType === 2 ?
                    <Form.Item label='视频课件'>
                      <VideoUpload
                        handleVideoChange={(url: any) => this.state.assetUrl = url}
                      />
                    </Form.Item>
                    :
                    <Form.Item label='文档课件'>
                      <DocumentUpload
                        handleDocChange={(url: any) => this.state.assetUrl = url}
                      />
                    </Form.Item>
                )
              }
              <Form.Item style={{float: 'right'}}>
                <Space>
                  <Button onClick={() => this.setState({createVisible: false, assetType: 0, assetUrl: ''})}>取消</Button>
                  <Button type='primary' htmlType='submit'>确定</Button>
                </Space>
              </Form.Item>
            </Form>
          }
        </Modal>
      </div>
    );
  }
}

export default connect()(CourseAssetManager);
